<template>
	<view class="main">
		<navBar :title="details.title"></navBar>
		<view class="blogDetalis">
			<u--image :showLoading="true" :src="details.src" width="100%" height="40vh" @click="click"></u--image>
			<view class="u-content">
				<u-parse :content="details.content"></u-parse>
			</view>
			<view class="time">{{timeFormatSeconds(details.createdAt)}} 发布</view>
		</view>
		<view class="comments" :style="{ 'padding-bottom': showMoreTool ? '17vh' : '11vh' }">
			<view class="mainComments" v-for="(comments,index) in rootComments" :key="comments.id">
				<view class="mainLeft">
					<u--image :showLoading="true" shape="circle" :src="comments.userAvatar" width="12vw" height="7vh"
						@click="click">
					</u--image>
				</view>
				<view class="mainRight">
					<view class="faMain">
						<view class="Cn" @click="addsoncomments(comments)">
							<text>{{comments.userName}}</text>
							<text>{{comments.content}}</text>
							<text>{{getDateDiff(comments.createdAt)}}</text>
						</view>
						<view class="Right">
							<u-icon ref="icon" @click="changelike(comments.id,comments.blogId,index)"
								:name="classicon[0].name" :color="classicon[0].color" size="28"></u-icon>
						</view>
					</view>
					<view class="sonMain"
						v-if='sonComments.filter(soncomment=>soncomment.parentCommentId === comments.id ).length !==0'
						v-for="sonCom in sonComments.filter(soncomment=>soncomment.parentCommentId === comments.id )"
						:key="sonCom.id">
						<view class="mainLeft">
							<u--image :showLoading="true" shape="circle" :src="sonCom.userAvatar">
							</u--image>
						</view>
						<view class="mainRight1">
							<view class="Cn" @click="addsoncomments(sonCom)">
								<text>{{sonCom.userName}}</text>
								<text>{{sonCom.content }}</text>
								<text>{{getDateDiff(sonCom.createdAt)}}</text>
							</view>
							<view class="Right">
								<u-icon :ref="'icon'+comments.id"
									@click="changesonlike(sonCom.id,sonCom.blogId,index,'icon'+comments.id)"
									:name="classicon[0].name" :color="classicon[0].color" size="28"></u-icon>
							</view>
						</view>
					</view>
				<!-- 	<view class="sonMain"
						v-if='sonComments.filter(soncomment=>soncomment.parentCommentId === comments.id ).length !==0'
						v-for="sonCom in sonComments.filter(soncomment=>soncomment.parentCommentId !== comments.id )"
						:key="sonCom.id">
						<view class="mainLeft">
							<u--image :showLoading="true" shape="circle" :src="sonCom.userAvatar">
							</u--image>
						</view>
						<view class="mainRight1">
							<view class="Cn" @click="addsoncomments(sonCom)">
								<text>{{sonCom.userName}}</text>
								<text>{{'回复'+" "+sonCom.beRepliedUserName+" "+':'+" "+sonCom.content }}</text>
								<text>{{sonCom   }}</text>
								<text>{{comments   }}</text>

								<text>{{getDateDiff(sonCom.createdAt)}}</text>
							</view>
							<view class="Right">
								<u-icon :ref="'icon'+comments.id"
									@click="changesonlike(sonCom.id,sonCom.blogId,index,'icon'+comments.id)"
									:name="classicon[0].name" :color="classicon[0].color" size="28"></u-icon>
							</view>
						</view>
					</view> -->
				</view>
			</view>
		</view>
		<view class="inp">
			<u--input shape="circle" placeholder="请输入内容" border="surround" @confirm="confirm" v-model="value">
			</u--input>
			<view class="clickMain">
				<u-icon size="6vw" :name="islikeBlog[islikeBlogflag].name" :color="islikeBlog[islikeBlogflag].color"
					@click="like"></u-icon> 赞
				<u-icon size="6vw" :name="attentionBlogicon[attentionBlogiconflag].name"
					:color="attentionBlogicon[attentionBlogiconflag].color" @click="attention"></u-icon> 关注博主
				<u-icon size="6vw" name="chat"></u-icon> {{details.commentNum}}
			</view>
		</view>
		<u-overlay :show="showMoreTool" :opacity="0.3" @click="showMoreTool = false">
			<view class="import" @tap.stop :style="{ height: showMoreTool ? '' : '0vh' }">
				<u-textarea placeholder="请输入内容" @confirm="enter" height='100' confirmType="done" v-model="sonvalue">
				</u-textarea>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	import {
		blogId,
		getComment,
		likeComment,
		attentionUser,
		addComment,
		likeBlog,
		addsonComment
	} from '@/config/api.js'
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				classicon: [{
					name: 'heart',
					color: '#909399'
				}, {
					name: 'heart-fill',
					color: 'red'
				}],
				islikeBlogflag: 0,
				islikeBlog: [{
					name: 'thumb-up',
					color: '#909399'
				}, {
					name: 'thumb-up-fill',
					color: '#FE8A44'
				}],
				attentionBlogiconflag: 0,
				attentionBlogicon: [{
					name: 'star',
					color: '#909399'
				}, {
					name: 'star-fill',
					color: '#FE8A44'
				}],

				details: {
					title: '',
					content: '',
					src: '',
					createdAt: '',
					userblogId: '',
					commentNum: 0,
					blogId: '',
					faCommentid: 0,
				},
				rootComments: [],
				sonComments: [],
				value: '',
				sonvalue: '',
				showMoreTool: false
			}
		},
		onLoad(option) {
			this.blogDetails(option.id)
			this.commentDetails(option.id)

		},
		methods: {
			// 博客详情
			blogDetails(id) {
				blogId(id).then(res => {
					console.log(res);
					this.details.title = res.data.title
					this.details.content = res.data.content
					this.details.src = res.data.cover
					this.details.createdAt = res.data.createdAt
					this.details.userblogId = res.data.userId
					this.details.blogId = res.data.id
					console.log(this.details);

				})
			},
			// 评论详情
			commentDetails(id) {
				getComment(id).then(res => {
					console.log(res);
					this.details.commentNum = res.data.count
					const comments = res.data.rows
					const rootcomments = comments.filter(comments => comments.parentCommentId === 0).sort((a,
						b) => {
						return this.time(b.createdAt) - this.time(a.createdAt)
					})
					const sonComments = comments.filter(comments => comments.parentCommentId !== 0).sort((a,
						b) => {
						return this.time(b.createdAt) - this.time(a.createdAt)
					})
					this.rootComments = rootcomments
					this.sonComments = sonComments
					console.log(sonComments, rootcomments);
				})
			},
			// 转化为时间戳
			time(time) {
				var d = new Date(time);
				d = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d
					.getMinutes() + ':' + d.getSeconds();
				var s = new Date(d).getTime();
				return s
			},
			// 转化时间格式
			timeFormatSeconds(time) {
				var d = time ? new Date(time) : new Date();
				var year = d.getFullYear();
				var month = d.getMonth() + 1;
				var day = d.getDate();
				var hours = d.getHours();
				var min = d.getMinutes();
				var seconds = d.getSeconds();

				if (month < 10) month = '0' + month;
				if (day < 10) day = '0' + day;
				if (hours < 0) hours = '0' + hours;
				if (min < 10) min = '0' + min;
				if (seconds < 10) seconds = '0' + seconds;
				return (year + '年' + month + '月' + day + '日' + hours + ':' + min + ':' + seconds);
			},
			// 发布评论与现在间隔
			getDateDiff(post_modified) {
				// 拿到当前时间戳和发布时的时间戳，然后得出时间戳差
				var curTime = new Date();
				var postTime = new Date(post_modified);

				//部分浏览器不兼容此转换建议所以对此进行补充（指定调用自己定义的函数进行生成发布时间的时间戳）
				var timeDiff = curTime.getTime() - postTime.getTime();
				//上面一行代码可以换成以下（兼容性的解决）
				// var timeDiff = curTime.getTime() - getTs(post_modified);

				// 单位换算
				var min = 60 * 1000;
				var hour = min * 60;
				var day = hour * 24;
				var week = day * 7;
				var month = week * 4;
				var year = month * 12;

				// 计算发布时间距离当前时间的周、天、时、分
				var exceedyear = Math.floor(timeDiff / year);
				var exceedmonth = Math.floor(timeDiff / month);
				var exceedWeek = Math.floor(timeDiff / week);
				var exceedDay = Math.floor(timeDiff / day);
				var exceedHour = Math.floor(timeDiff / hour);
				var exceedMin = Math.floor(timeDiff / min);
				// 最后判断时间差到底是属于哪个区间，然后return

				if (exceedyear < 100 && exceedyear > 0) {
					return '发表于' + exceedyear + '年前';
				} else {
					if (exceedmonth < 12 && exceedmonth > 0) {
						return exceedmonth + '月前';
					} else {
						if (exceedWeek < 4 && exceedWeek > 0) {
							return exceedWeek + '星期前';
						} else {
							if (exceedDay < 7 && exceedDay > 0) {
								return exceedDay + '天前';
							} else {
								if (exceedHour < 24 && exceedHour > 0) {
									return exceedHour + '小时前';
								} else {
									if (exceedMin == 0 || exceedMin < 0) {
										return '刚刚发表';
									} else {
										return exceedMin + '分钟前';
									}

								}
							}
						}
					}
				}
			},
			// 父评论like
			changelike(id, blogId, index) {
				console.log(id, blogId, index, this.$refs.icon[index]);
				likeComment(id, blogId, this.userInfo.token).then(res => {
					console.log(res);
					if (res.msg === "取消点赞成功") {
						this.$refs.icon[index].color = '#909399'
						this.$refs.icon[index].name = 'heart'
						uni.showToast({
							title: '取消成功',
							duration: 2000,
							icon: 'success'
						});
					}
					if (res.msg === "点赞成功") {
						this.$refs.icon[index].color = 'red'
						this.$refs.icon[index].name = 'heart-fill'
						uni.showToast({
							title: '点赞成功',
							duration: 2000,
							icon: 'success'
						});
					}
				})
			},
			// 子评论like
			changesonlike(id, blogId, index, icon) {
				console.log(id, blogId, index, icon, this.$refs[icon]);
				likeComment(id, blogId, this.userInfo.token).then(res => {
					console.log(res);
					if (res.msg === "取消点赞成功") {
						this.$refs[icon][index].color = '#909399'
						this.$refs[icon][index].name = 'heart'
						uni.showToast({
							title: '取消成功',
							duration: 2000,
							icon: 'success'
						});
					}
					if (res.msg === "点赞成功") {
						this.$refs[icon][index].color = 'red'
						this.$refs[icon][index].name = 'heart-fill'
						uni.showToast({
							title: '点赞成功',
							duration: 2000,
							icon: 'success'
						});
					}
				})
			},
			// 关注博主
			attention() {
				console.log(this.details.userblogId);
				attentionUser(this.details.userblogId, this.userInfo.token).then(res => {
					console.log(res);
					if (res.msg === "关注成功") {
						this.attentionBlogiconflag = 1
						uni.showToast({
							title: '关注成功',
							duration: 2000,
							icon: 'success'
						});
					}
					if (res.msg === "取消关注成功") {
						this.attentionBlogiconflag = 0
						uni.showToast({
							title: "取消关注成功",
							duration: 2000,
							icon: 'success'
						});

					}
				})
			},
			// 点赞博客
			like() {
				likeBlog(this.details.blogId, this.userInfo.token).then(res => {
					console.log(res);
					if (res.msg === "点赞成功") {
						this.islikeBlogflag = 1
						uni.showToast({
							title: '点赞成功',
							duration: 2000,
							icon: 'success'
						});
					}
					if (res.msg === "取消点赞成功") {
						this.islikeBlogflag = 0
						uni.showToast({
							title: "取消点赞成功",
							duration: 2000,
							icon: 'success'
						});

					}
				})
			},
			// 创建评论
			confirm(e) {
				console.log('confirm', e, this.value);
				console.log(this.details.blogId, e, this.userInfo.token);
				if (!e) {
					uni.showToast({
						title: '评论不能为空 ',
						duration: 2000,
						icon: 'error'
					});
					return
				}
				addComment(this.details.blogId, e, this.userInfo.token).then(res => {
					console.log(res);
					if (res.code === 200) {
						uni.showToast({
							title: '评论成功 ',
							duration: 2000,
							icon: 'success'
						});
						this.commentDetails(this.details.blogId)
						this.value = ''
					}
				})
			},
			// 打开用户评论输入框
			addsoncomments(comments) {
				this.details.faCommentid = comments.id
				console.log(comments.id, this.details.faCommentid);
				this.showMoreTool = true
			},
			// 创建子评论
			enter(e) {
				this.showMoreTool = false
				console.log(this.details.blogId, e.detail.value, this.details.faCommentid, this.userInfo.token)
				console.log(addsonComment);
				addsonComment(this.details.blogId, e.detail.value, this.details.faCommentid, this.userInfo.token).then(
					res => {
						console.log(res);
						if (res.code === 200) {
							uni.showToast({
								title: '评论成功 ',
								duration: 2000,
								icon: 'success'
							});
							this.commentDetails(this.details.blogId)
							this.sonvalue = ''
						}
					})
			}
		},
		computed: {
			...mapState(['userInfo'])
		}
	}
</script>

<style lang="scss">
	.main {
		box-sizing: border-box;
		width: 100vw;

		.blogDetalis {
			width: 100%;
			padding-bottom: 2vh;
			border-bottom: 0.1vh solid #BEBEBE;

			.u-content {
				margin-left: 3vw;

			}

			.time {
				margin-top: 2vh;
				text-align: end;
				color: #BEBEBE;
				font-size: 3vw;
				margin-right: 4vw;
			}
		}
	}

	.comments {
		padding-bottom: 11vh;

		.mainComments {
			display: flex;
			border-bottom: 0.2vh solid #BEBEBE;

			.mainLeft {
				margin-right: 5vw;
				display: flex;
				margin-top: 2vh;
				margin-left: 3vw;
			}

			.mainRight {
				display: flex;
				flex-direction: column;
				flex: 1;

				.Cn {
					z-index: 9999;
					flex: 1;
					display: flex;
					flex-direction: column;
					margin-top: 2vh;
					margin-right: 3vw;

					uni-text {
						margin-bottom: 1vh;
					}

					uni-text:nth-child(1) {
						color: #BEBEBE;
						font-size: 3.5vw;
					}

					uni-text:nth-child(2) {
						font-size: 3.5vw;
					}

					uni-text:nth-child(3) {
						text-align: end;
						color: #BEBEBE;
						font-size: 2vw;
					}
				}

				.Right {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 15vw;
				}

				.faMain {
					display: flex;
				}

				.sonMain {
					display: flex;
					width: 100%;

					::v-deep .uni-image {
						width: 6vw !important;
						height: 4vh !important;
					}

					::v-deep uni-image {
						width: 6vw !important;
						height: 4vh !important;
					}

					::v-deep .u-transition {
						width: 6vw !important;
						height: 4vh !important;
					}

					.mainLeft {
						margin-top: 2vh;

						::v-deep .u-image {
							width: 6vw !important;
							height: 4vh !important;
						}

						::v-deep .u-image__image {
							width: 100% !important;
						}
					}

					.mainRight1 {
						width: 100%;
						display: flex;

						.Cn {
							flex: 1;
						}
					}
				}
			}

		}

	}

	.inp {
		position: fixed;
		bottom: 0;
		left: 0%;
		background-color: #fff !important;
		z-index: 100000;
		display: flex;
		align-items: center;
		height: 10vh;
		width: 100vw;
		padding: 0 2vw;
		box-sizing: border-box;

		.clickMain {
			width: 50vw;
			justify-content: space-between;
			display: flex;
			margin: 0 4vw 0 2vw;
		}

	}

	.import {
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		width: 100%;
		// padding: 1vh 2vw;
		box-sizing: border-box;
		// height: 32vh;
	}
</style>
